<template>
    <!-- {{ $router.options.routes }}  演示查找-->
    <el-menu active-text-color="#ffd04b" background-color="#d9ecff" class="el-menu-vertical-demo" :default-active="$route.path"
        text-color="black" :router="true">
        <template v-for="(item,index) in $router.options.routes">
        <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta ? item.meta.show == true:''">
            <!-- <el-icon><House /></el-icon> -->
            <component :is="item.meta ? item.meta.icon:''" class="icon"></component>
            <span>{{ item.meta ? item.meta.title:''}}</span>
        </el-menu-item>
        
        <!---二级菜单-->
        <el-sub-menu :index="item.path" v-if="item.children != undefined &&  item.meta ? item.meta.show == true : ''">
            <template #title>
                 <component :is="item.meta ? item.meta.icon:''" class="icon"></component>
                <span>{{  item.meta ? item.meta.title:'' }}</span>
            </template>
            <el-menu-item-group>
                <template v-for="item2 in item.children">
                <el-menu-item :index="item2.path" v-if="item2.meta?item2.meta.show == true:''">
                     <component :is="item2.meta ? item2.meta.icon:''" class="icon"></component>
                    {{ item2.meta?item2.meta.title:''}}
                </el-menu-item>
                </template>
            </el-menu-item-group>

        </el-sub-menu>
        </template>
    </el-menu>
</template>
<script setup lang="ts">

</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    /* 计算屏幕的高度 */
    min-height:calc(100vh - 40px);

}
.icon{
    width: 20px;
    height: 20px;
    padding-right: 3px;
}
</style>
